<template>
    <div class="path_tracking">
        <span v-for="(item, index) in path" :key="index" :style="`cursor: ${isObj(item) ? 'pointer' : 'auto'}`" v-show="index !== 0">
            <span class="bread-item" :style="`color: ${isObj(item) ? '#987453' : '#888888'};font-size: 14px;`" @click="jump(item)">{{isObj(item) ? item.label : item}}</span>
            <span class="bread-icon" v-if="index < path.length - 1" style="font-size: 14px;">></span>
        </span>
    </div>
</template>

<script>
export default {
    name: 'path-tracking',
    props: {
        path: {
            type: Array,
            default: () => new Array(),
            required: true
        },
    },
    methods: {
        isObj(param) {
            return Object.prototype.toString.call(param) === "[object Object]"
        },
        jump(item) {
            this.isObj(item)
            ?
            this.$router.replace(item.query ? {name: item.name, query: item.query} : {name: item.name})
            :
            ''
        }
    }
}
</script>
<style scoped>
    .path_tracking{
        width: 100%;
        height: 40px;
        background-color: #fff;
        display: flex;
        align-items: center;
        padding-left: 2.5rem;
        box-sizing: border-box;
        font-size: 1.6rem;
        color: #888888;
    }
    .bread-icon{
        padding: .5rem;
    }
</style>
